<template>
    <van-popup v-model="show" position="right" :style="{ width:'100%',height:'100%',backgroundColor:'#F2F2F2' }">
        <van-nav-bar title="笔参数" left-arrow @click-left="clickLeft" />
        <div class="penDataList">
            <van-cell-group inset class="margin-tb-lg">
                <pen-data-cell v-for="i in area(oneArea)" :key="i.label" :title="i.label" :value="i.value" :isLink="i.isLink" @openSubmitForm="openSubmitForm" />
            </van-cell-group>
            <van-cell-group inset class="margin-tb-lg">
                <pen-data-cell v-for="i in area(twoArea)" :key="i.label" :title="i.label" :value="i.value" :isLink="i.isLink" @openSubmitForm="openSubmitForm" />
            </van-cell-group>
            <van-cell-group inset class="margin-tb-lg">
                <pen-data-cell v-for="i in area(threeArea)" :key="i.label" :title="i.label" :value="i.value" :isLink="i.isLink" @openSubmitForm="openSubmitForm" />
            </van-cell-group>
            <van-cell-group inset class="margin-tb-lg">
                <pen-data-cell v-for="i in area(fourArea)" :key="i.label" :title="i.label" :value="i.value" :isLink="i.isLink" @openSubmitForm="openSubmitForm" />
            </van-cell-group>
        </div>
        <submit-form ref="submitForm" :show.sync="formShow" :title="title" :value="value" />
    </van-popup>
</template>

<script>
    import * as dataName from '../../utils/dataName';
    import PenDataCell from './PenDataCell.vue'
    import SubmitForm from './SubmitForm.vue';
    import { mapGetters, mapActions, mapMutations } from 'vuex';
    export default {
        components: { PenDataCell, SubmitForm },
        props: {
            show: { type: Boolean, required: true }
        },
        data() {
            return {
                formShow: false,
                title: '',
                value: '',
            }
        },
        computed: {
            ...mapGetters(['mobilePenDataList']),
            area() {
                return (data) => {
                    return this.$store.state.mobilePenDataList.filter(i => data.includes(i.label))
                }
            },
            oneArea() {
                return [dataName.BluetoothName, dataName.BluetoothMAC, dataName.BluetoothFirmwareVersion, dataName.MCUFirmwareVersion]
            },
            twoArea() {
                return [dataName.CustomerId, dataName.ElectricQuantity, dataName.FlashProportion, dataName.RealTimeClock]
            },
            threeArea() {
                return [dataName.Buzzer, dataName.BuzzerChirp, dataName.PressureRouse, dataName.NotifyLight, dataName.AutoShutdownTime]
            },
            fourArea() {
                return [dataName.PressureSensor, dataName.PressureCorrection]
            }
        },
        methods: {
            openSubmitForm(title, value) {
                this.title = title
                this.value = value
                this.formShow = true
            },
            clickLeft() {
                this.$emit('update:show', false)
            }
        }
    }
</script>

<style lang="less" scoped>
    .van-popup {
        display: flex;
        flex-direction: column;

        .penDataList {
            flex: 1;
            overflow-y: scroll;
        }
    }
</style>